<template>
  <div class="work">
    <ul id="ter">
      <h3>师资情况</h3>
      <li>
        <p>中职教师</p>
        <p><b style="color:#8378EA;font-size:24px">120个</b></p>
      </li> 
      <li>
        <p>高职教师</p>
        <p><b style="color:#32C5E9;font-size:24px">100个</b></p>
      </li> 
      <li>
        <p>大实训教师</p>
        <p><b style="color:#FF9F7F;font-size:24px">20个</b></p>
      </li> 
    </ul>
    <!-- echerts -->
    <div id="main" style="width: 90%;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data(){
    return {
      option : {
          backgroundColor: '#2c343c',

          title: {
              text: '各学院学生比例',
              left: 'center',
              top: 20,
              textStyle: {
                  color: '#ccc'
              }
          },

          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },

          visualMap: {
              show: false,
              min: 80,
              max: 600,
              inRange: {
                  colorLightness: [0, 1]
              }
          },
          series: [
              {
                  name: '访问来源--振涛教育',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '50%'],
                  data: [
                      {value: 335, name: '游戏开发'},
                      {value: 310, name: '人工智能'},
                      {value: 274, name: '大数据'},
                      {value: 235, name: '物联网'},
                      {value: 400, name: '网站工程'},
                      {value: 360, name: 'UI设计'}
                  ].sort(function (a, b) { return a.value - b.value; }),
                  roseType: 'radius',
                  label: {
                      color: 'rgba(255, 255, 255, 0.3)'
                  },
                  labelLine: {
                      lineStyle: {
                          color: 'rgba(255, 255, 255, 0.3)'
                      },
                      smooth: 0.2,
                      length: 10,
                      length2: 20
                  },
                  itemStyle: {
                      color: '#c23531',
                      shadowBlur: 200,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },

                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                      return Math.random() * 200;
                  }
              }
          ]
      },
    }
  },
  mounted(){
  var myChart = echarts.init(document.getElementById('main'));
   myChart.setOption(this.option);
  }
}
</script>


<style>
#main{
  margin: 175px 40px;
}
#ter li{
    float: left;
    padding: 12px 0;
    width: 30%;
    text-align: center;
    /* height: 60px; */
    list-style: none;
    box-shadow: 0px 2px 2px 2px #9e9e9e;
}

#ter li:nth-child(3){
  margin: 0 12px;
}

</style>

